<template>
	<view class="guide">
		<view class="icon-back" @click="back" :style="'top:'+nav_height+'px'">
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>
		<!-- banner -->
		<view class="banner">
			<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image src="https://static.dhlshu.cn/app/static/fl-banner2.png" mode="aspectFill"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="list" >
			<view class="content flex-box">
				<view class="li hdli" v-for="(item,index) in list" :key="item.id">
					<view class="hd flex-box"><text class="h-title"></text>{{item.title}}</view>
					<!-- <view v-else>
						<view class="i-box" >
							<u-image :src="item.img" :lazy-load="true" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="text">{{item.title}}</view>
					</view> -->
					<view class="ul flex-box" style="flex-wrap: wrap;">
						<view class=" " style="width:25%"  @click="toDetails(it.id)" v-for="(it,i) in item.child" :key="it.id">
							<view class="i-box" >
								<u-image :src="it.imgurl" :lazy-load="true" width="80rpx" height="80rpx"></u-image>
							</view>
							<view class="text">{{it.title}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	// import app from "@/common/js/comm_url.js";
	export default {
		data() {
			return {
				comm_img_url:'',
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: '/static/img/banner_00.png'
					},
					
				],
				background:{
					backgroundColor: '#3ec59d',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				list:[]
			};
		},
		onLoad() {
			this.getMeetAnEmergencyList()
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			getMeetAnEmergencyList(){
				this.$u.api.questiontype()
				.then(res=>{
					console.log(res);
					if(res.status){
						this.list = res.msg
					}
				})
			},
			toDetails(id){
				console.log(id,'id')
				uni.navigateTo({
					url: './details?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background:#f6f7fb;
		.icon-back{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 100rpx;
			left:20rpx;
			z-index: 2;
			text-align: center;
			line-height: 75rpx;
			padding-right: 5rpx;
			// margin-top:20rpx;
			border-radius: 50%;
			background: rgba(0,0,0,0.5);
			padding-top:15rpx;
			padding-left:10rpx;
		}
		.list{
			background:#f6f7fb;
		}
		.content{
			
			.ul{
				padding:20rpx 0;
				background:#fff;
				border-radius: 20rpx;
			}
		}
		/* banner */
			.banner{
				// padding: 0 25rpx;
				height: 525rpx;
				// margin-bottom: 30rpx;
				// margin: -200rpx auto 20rpx;
				border-radius: 0;
				overflow: hidden;
				.screen-swiper{
					height: 100%;
					min-height: 100% !important;
					image{
						height: 540rpx;
						border-radius: 0;
					}
				}
			}
		.guide{
			
			.list{
				// margin:0 20rpx;
				padding:30rpx 0;
				
				.content{
			
					flex-wrap: wrap;
				}
				.hd{
					font-size:30rpx;
					padding-bottom:30rpx;
					.h-title{
						display: inline-block;
						width:10rpx;
						height:30rpx;
						background-color: #d0abf4;
						border-radius: 5rpx;
						margin-right:10rpx;
					}
				}
				
				.li{
					
					padding:0 30rpx;
					width:25%;
					text-align: center;
					.i-box{
						width:80rpx;
						height:80rpx;
						margin:0 auto;
					}
					.text{
						padding:20rpx 0;
						font-size:24rpx;
					}
				}
				.li:first-child{
					padding-top:0;
				}
				.hdli{
					width:100%;
					padding-bottom:0;
					padding-top:30rpx;
				}
			}
		}
	}
</style>
